<template>
  <div class="avanced_mod" :class="themeClass">
    <v-loading v-if="loading" />
    <v-nav :title="$t('PrimaryCertification.Junior Certification')"></v-nav>
    <div class="avanced_mod_box">
      <div class="moomoo_form">
        <div class="moomoo_form_input">
          <p>{{ $t('PrimaryCertification.type of certificate') }}</p>
          <van-field class="input" readonly name="picker" :disabled="isDisabled" :value="form.type.text" :placeholder="$t('PrimaryCertification.Please select the document type')" @click="showPicker = !isDisabled ? true : false" />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker show-toolbar :columns="cardTypeList" @confirm="onConfirm" @cancel="showPicker = false" :default-index="form.type.value" :confirm-button-text="$t('info.info10')" :cancel-button-text="$t('info.info11')" />
          </van-popup>
        </div>
        <div class="moomoo_form_input">
          <p>{{ $t('PrimaryCertification.Name') }}</p>
          <van-field class="input" v-model="form.name" :disabled="isDisabled" :placeholder="$t('PrimaryCertification.Please type in your name')" />
        </div>
        <div class="moomoo_form_input">
          <p>{{ $t('PrimaryCertification.ID number') }}</p>
          <van-field class="input" v-model="form.number" :disabled="isDisabled" :placeholder="$t('PrimaryCertification.Please enter your ID number')" />
        </div>

        <div class="moomoo_form_submit">
          <van-button color="#DAAB51" :disabled="isDisabled" @click="primarySubmit">{{ primarySubmitText }}</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PrimaryCertification',
  data() {
    return {
      form: {
        type: {},
        name: '',
        number: ''
      },
      cardTypeList: [
        { text: this.$t('PrimaryCertification.ID card'), value: 0 },
        { text: this.$t('PrimaryCertification.passport'), value: 1 },
        { text: this.$t('PrimaryCertification.driver license'), value: 2 }
      ],
      showPicker: false,
      loading: false,
      isDayTime: false,
      isDisabled: false,
      primarySubmitText: this.$t('PrimaryCertification.Submit certification')
    }
  },
  created() {
    this.getAuthentication()
  },
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  methods: {
    onConfirm(value) {
      this.form.type = value
      this.showPicker = false
    },
    async primarySubmit() {
      if (JSON.stringify(this.form.type) === '{}') {
        this.$toast(this.$t('PrimaryCertification.Please select the document type'))
        return
      }
      if (this.form.name.trim() === '') {
        this.$toast(this.$t('PrimaryCertification.Please type in your name'))
        return
      }
      if (this.form.number.trim() === '') {
        this.$toast(this.$t('PrimaryCertification.Please enter your ID number'))
        return
      }
      let params = {
        tab: 'primary',
        primary_type: this.form.type.value,
        primary_name: this.form.name,
        primary_number: this.form.number
      }
      this.loading = true
      await this.$https.post('/user/submitAuthentication', params).then(res => {
        if (res != undefined && res.code == 1) {
          this.$router.go(-1)
        }
      })
      this.loading = false
    },
    async getAuthentication() {
      this.loading = true
      await this.$https.get('/user/getAuthentication').then(res => {
        if (res != undefined && res.code == 1 && res.data) {
          this.form.type.text = this.cardTypeList[res.data.primary_type].text
          this.form.type.value = res.data.primary_type
          this.form.name = res.data.primary_name
          this.form.number = res.data.primary_number
          if (res.data.primary_review == 0) {
            this.primarySubmitText = this.$t('PrimaryCertification.Resubmit')
          } else if (res.data.primary_review == 1) {
            this.primarySubmitText = this.$t('PrimaryCertification.Authentication successful')
            this.isDisabled = true
          } else if (res.data.primary_review == 2) {
            this.primarySubmitText = this.$t('PrimaryCertification.Certification in progress')
            this.isDisabled = true
          }
        }
      })
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
@import url('../AvancedAuthentication/index.less');
</style>
